<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车全选</title>
    <style>
        th{
            background-color: #2faee0;
            color: aliceblue;
        }
        td {
            width: 200px;
            height: 40px;
            text-align: center;
        }
    </style>
    <table border="1px" cellspacing="0">
        <thead>
        <tr>
            <th><input type="checkbox" id="th"></th>
            <th>商品</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody id="tb">
        <tr>
            <td><input type="checkbox"></td>
            <td>iPhone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>iPad pro</td>
            <td>5000</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>iPad Air</td>
            <td>2000</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>Apple Watch</td>
            <td>2000</td>
        </tr>
        </tbody>
    </table>
</head>
<body>
<script>
    var th = document.querySelector("input");
    var tb = document.getElementById('tb').querySelectorAll("input");
    th.onclick = function () {
        for (var i = 0; i < tb.length; i++) {
            tb[i].checked = th.checked;
        }
    }
    for (var i = 0; i < tb.length; i++) {
        tb[i].onclick = function () {
            var flag = true;
            for (var i = 0; i < tb.length; i++) {
                if (!tb[i].checked) {
                    flag = false;
                    break;
                }
            }
            th.checked = flag;
        }
    }
</script>
</body>
</html>